<template>
  <view class="test-page">
    <view class="header">
      <text class="title">External Storage Test</text>
    </view>
    
    <scroll-view class="content" scroll-y="true">
      <view class="section">
        <view class="section-title">
          <text>Storage Location Test</text>
        </view>
        
        <view class="test-item">
          <text class="test-label">Current Storage Method:</text>
          <text class="test-value">{{ currentMethod }}</text>
        </view>
        
        <view class="test-item">
          <text class="test-label">External Storage Path:</text>
          <text class="test-value">/storage/emulated/0/MyGames/</text>
        </view>
        
        <view class="test-item">
          <text class="test-label">App Data Path:</text>
          <text class="test-value">/storage/emulated/0/Android/data/com.moxuan.app/documents/Games/</text>
        </view>
        
        <button class="test-btn" @click="testExternalAccess">
          Test External Storage Access
        </button>
        
        <button class="test-btn" @click="testCreateDirectory">
          Test Create External Directory
        </button>
        
        <view class="result-area" v-if="testResult">
          <text class="result-title">Test Result:</text>
          <text class="result-text">{{ testResult }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentMethod: 'External Storage (/storage/emulated/0/)',
      testResult: ''
    }
  },
  
  methods: {
    testExternalAccess() {
      // #ifdef APP-PLUS
      const externalPath = '/storage/emulated/0'
      
      plus.io.resolveLocalFileSystemURL('file://' + externalPath, 
        (entry) => {
          this.testResult = `✅ Success: External storage accessible at ${entry.fullPath}`
          console.log('External storage test success:', entry.fullPath)
        },
        (error) => {
          this.testResult = `❌ Failed: Cannot access external storage - ${JSON.stringify(error)}`
          console.log('External storage test failed:', error)
        }
      )
      // #endif
      
      // #ifndef APP-PLUS
      this.testResult = '❌ This test only works in APP environment'
      // #endif
    },
    
    testCreateDirectory() {
      // #ifdef APP-PLUS
      const testDirPath = '/storage/emulated/0/TestGameDownloads'
      
      plus.io.resolveLocalFileSystemURL('file:///storage/emulated/0', 
        (rootEntry) => {
          rootEntry.getDirectory('TestGameDownloads', { create: true }, 
            (dirEntry) => {
              this.testResult = `✅ Success: Directory created at ${dirEntry.fullPath}`
              console.log('Directory creation success:', dirEntry.fullPath)
            },
            (dirError) => {
              this.testResult = `❌ Failed: Cannot create directory - ${JSON.stringify(dirError)}`
              console.log('Directory creation failed:', dirError)
            }
          )
        },
        (rootError) => {
          this.testResult = `❌ Failed: Cannot access external root - ${JSON.stringify(rootError)}`
          console.log('External root access failed:', rootError)
        }
      )
      // #endif
      
      // #ifndef APP-PLUS
      this.testResult = '❌ This test only works in APP environment'
      // #endif
    }
  }
}
</script>

<style lang="scss" scoped>
.test-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.header {
  background-color: white;
  padding: 16px;
  border-bottom: 1px solid #e5e5e5;
}

.title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.content {
  flex: 1;
  padding: 16px;
}

.section {
  background-color: white;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}

.test-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}

.test-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.test-value {
  font-size: 13px;
  color: #007aff;
  font-family: monospace;
  word-break: break-all;
}

.test-btn {
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 12px 16px;
  margin: 8px 0;
  font-size: 14px;
}

.result-area {
  margin-top: 16px;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 6px;
}

.result-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 8px;
}

.result-text {
  font-size: 13px;
  color: #666;
  word-break: break-all;
  white-space: pre-wrap;
}
</style>